<ui:composition  xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:c="http://java.sun.com/jsp/jstl/core"
                 xmlns:pou="http://primefaces.org/ui">

    <div style="overflow: auto">
        <div id="chart5" style="width: 1500px; height: 400px;  float: left;"  ></div>
        
    </div>
    <script>
        $(document).ready(function(){
            var s1 = [#{graphicUnoP.grapMotivosRetencionOrd.grpbar1}];//graphicUnoP.grapMotivosRetencionOrd.pbarr1
            var s2 = [#{graphicUnoP.grapMotivosRetencionOrd.grpbar2}];
            var s3 = [#{graphicUnoP.grapMotivosRetencionOrd.grpbar3}];
            plot3 = $.jqplot('chart5', [s1, s2, s3], {
                // Tell the plot to stack the bars.
                //    stackSeries: true,
                title:'Motivos de Retencion de Ordenes',
                captureRightClick: true,
                series:[
                    {label:'#{graphicUnoP.grapMotivosRetencionOrd.seriesName1}'}, 
                    {label:'#{graphicUnoP.grapMotivosRetencionOrd.seriesName2}'}, 
                    {label:'#{graphicUnoP.grapMotivosRetencionOrd.seriesName3}'}
                ],
                seriesDefaults:{
                    pointLabels: { show:true } ,
                    renderer:$.jqplot.BarRenderer,
                    rendererOptions: {
                        // Put a 30 pixel margin between bars.
                        barMargin: 30,
                        // Highlight bars when mouse button pressed.
                        // Disables default highlighting on mouse over.
                        highlightMouseDown: true   
                    },
                    pointLabels: {show: true}
                },
                axes: {
                    xaxis: {
                        renderer: $.jqplot.CategoryAxisRenderer
                    },
                    yaxis: {
                        // Don't pad out the bottom of the data range.  By default,
                        // axes scaled as if data extended 10% above and below the
                        // actual range to prevent data points right on grid boundaries.
                        // Don't want to do that here.
                        padMin: 0
                    }
                },
                legend: {
                    show: true,
                    location: 'e'
                    //,  placement: 'outsideGrid' 
                }      
            });
            // Bind a listener to the "jqplotDataClick" event.  Here, simply change
            // the text of the info3 element to show what series and ponit were
            // clicked along with the data for that point.
            //  $('#chart3').bind('jqplotDataClick', 
            //    function (ev, seriesIndex, pointIndex, data) {
            //      $('#info3').html('series: '+seriesIndex+', point: '+pointIndex+', data: '+data);
            //    }
            //  ); 
        });
    </script>



</ui:composition>
